昨天我們學了怎麼從本地開發(mock)改成串接後端

今天我們要進化成正式環境!

TLTD

• 後端
  • 一樣寫一隻API回傳固定格式
  • 注意 和昨天不同的是網址少了 "/api" 前綴
• 前端
  • 一樣改2個檔案
  • \pure-admin-thin\src\utils\http\index.ts
  • \pure-admin-thin\.env.production
  • 注意 和昨天不同的是 production

1.後端

和昨天大同小異

const express = require("express");
const app = express();

const cors = require("cors");
app.use(cors());

const systemRouter = {
    path: "/system",
    meta: {
      icon: "setting",
      title: "menus.hssysManagement",
      rank: 11
    },
    children: [
      {
        path: "/system/role/index",
        name: "Role",
        meta: {
          icon: "role",
          title: "menus.hsRole"
        }
      }
    ]
  };
const permissionRouter = {
  path: "/permission",
  meta: {
    title: "menus.permission",
    icon: "lollipop",
    rank: 7,
  },
  children: [
    {
      path: "/permission/page/index",
      name: "PermissionPage",
      meta: {
        title: "menus.permissionPage",
      },
    },
    {
      path: "/permission/button/index",
      name: "PermissionButton",
      meta: {
        title: "menus.permissionButton",
        authority: [],
      },
    },
  ],
};
//注意這邊和昨天不同
app.get("/getAsyncRoutes", function (req, res) {
  res.send({
    code: 0,
    info: [permissionRouter,systemRouter],
  });
});

app.listen(3011, () => console.log("http://localhost:3011/"));

執行

node 該檔案名稱.js

2.前端

我們要修改開發中的環境變數，找到.env.production

修改\pure-admin-thin\.env.production

production 就少了兩個設定
因為 Port 就是 80，不用前綴直接貼後端網址即可

# 下面兩個在 production 被移除了!!
VITE_PORT = 8848
VITE_PROXY_DOMAIN = /api

設定檔程式碼 .env.production

假設我要放在/pure資料夾底下，檔案設置如下

# 開發環境讀取靜態檔案位置 這邊很重要
VITE_PUBLIC_PATH = "/pure/"

# 開發環境路由模式 
VITE_ROUTER_HISTORY = "hash"

# 開發環境后端網址
VITE_PROXY_DOMAIN_REAL = "http://localhost:3011"

如果位置設定錯誤會變這樣

原來是我之前打錯打成 "/pure" 導致錯誤路徑，應該修正成 "/pure/"

修改\pure-admin-thin\src\utils\http\index.ts

//...省略...

const { VITE_PROXY_DOMAIN, VITE_PROXY_DOMAIN_REAL } = loadEnv();

const defaultConfig: AxiosRequestConfig = {
  //今天的程式碼
    baseURL:
    process.env.NODE_ENV === "production"
      ? VITE_PROXY_DOMAIN_REAL
      : VITE_PROXY_DOMAIN_REAL + VITE_PROXY_DOMAIN,
  //昨天的程式碼 baseURL: VITE_PROXY_DOMAIN_REAL + VITE_PROXY_DOMAIN,
  timeout: 10000,
  headers: {
    Accept: "application/json, text/plain, */*",
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest"
  },
  paramsSerializer: params => qs.stringify(params, { indices: false })
};

//...省略...

完成修改後下指令

pnpm build

打包截圖

完成後會在專案生成dist資料夾，最後就可以部署到伺服器端囉~

我是安裝 XAMPP 跑 Apache

複製dist裡面的檔案放到C:\xampp\htdocs\pure

成功畫面

若沒用過的讀者們可以參考這篇文章:
https://kumo.tw/article.php?id=15

補充

過程中有遇到這個問題
Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
原因是出在 \src\utils\http\index.ts 檔案我忘記修改，用到昨天的程式碼導致 axios 抓不到正確的 url